import React, { Component } from 'react';
import { HashRouter as Router, Route,Redirect   } from 'react-router-dom'
import './StoreIndex.scss'


import Header from './compoments/Header/Header'
import Footer from './compoments/Footer/Footer'
import SwitchTab from './compoments/SwitchTab/SwitchTab'


import Evaluation from './compoments/Evaluation/Evaluation'
import FoodList from './compoments/FoodList/FoodList'
import BusinessDetails from './compoments/BusinessDetails/BusinessDetails'


import FoodsDetail from './compoments/FoodsDetail/FoodsDetail'

import api from '@/api/testapi'

class StoreIndex extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            seller:{},
            goods:[],
            viewNowGoodsID:'0,0',//正在预览的商品
        }
    }
    //子组件设置父组件state数据
    setStoreIndexState(k,v){
        this.setState({
            [k]:v
        })
    }
    //设置购物车
    setCount(index,foodsindex,value){
        this.state.goods[index].foods[foodsindex].count = value
        this.setState({
            [`goods[${index}].foods[${foodsindex}]`]:this.state.goods[index].foods[foodsindex]
        })
    }
    //清空购物车
    clearShopCart(){
        let foodsData = this.state.goods
        foodsData.forEach(el=>{
            el.foods.forEach(target=>{
                target.count = 0
            })
        })
        this.setState({
            goods:foodsData
        })
    }

    componentDidMount(){
        api.getSeller().then(res=>{
            this.setState({
                seller:res.result
            })
        })
        api.getGoods().then(res=>{
            console.info(res)
            res.result.goods.forEach((el,elIndex)=>{
                el.foods.forEach((target,targetIndex)=>{
                    target.count = 0
                    target.listIndex = elIndex
                    target.foodsIndex = targetIndex
                    target.id = `${elIndex},${targetIndex}`
                })
            })
            this.setState({
                goods:res.result.goods
            })
        })
    }
    
    getPreviewFoodDetail(){
 
        try{
            if(this.state.viewNowGoodsID){
                let listIndex = this.state.viewNowGoodsID.split(',')[0]
                let foodsIndex = this.state.viewNowGoodsID.split(',')[1]
                return this.state.goods[listIndex].foods[foodsIndex]
            }else{
                return {}
            }
        }catch(e){
            // console.error(e)
            return {}
        }
    }
    

    render() { 
        return (
            <div className="StoreIndex">
                <Header sellerData={this.state.seller}></Header>
                <Router>
                    <SwitchTab/>
                    <Route path="/store/home"   >
                        <FoodList 
                            foodsData={this.state.goods}
                            setCount={(index,foodsindex,value)=>{this.setCount(index,foodsindex,value)}}
                            setStoreIndexState={(k,v)=>{this.setStoreIndexState(k,v)}}
                        ></FoodList>
                        <Route path="/store/home/goods" >
                            <div  className="second-view">
                                <FoodsDetail
                                    goodsData={this.getPreviewFoodDetail()}
                                    setCount={(index,foodsindex,value)=>{this.setCount(index,foodsindex,value)}}
                                    setStoreIndexState={(k,v)=>{this.setStoreIndexState(k,v)}}
                                 ></FoodsDetail>
                            </div>
                        </Route>
                    </Route>
                    <Route path="/store/evaluation" >
                        <Evaluation sellerData={this.state.seller} ></Evaluation>
                    </Route>
                    <Route path="/store/businessdetails" >
                        <BusinessDetails sellerData={this.state.seller} ></BusinessDetails>
                    </Route>
                </Router>
                <Footer 
                    foodsData={this.state.goods} 
                    sellerData={this.state.seller}
                    setCount={(index,foodsindex,value)=>{this.setCount(index,foodsindex,value)}} 
                    clearShopCart={()=>{this.clearShopCart()}} 
                    ></Footer>
            </div>
        );
    }
}
 
export default StoreIndex;